<script>
import LikeCard from '../../components/mixins/LikeCard.vue'
import ViewsCard from '../../components/mixins/ViewsCard.vue'

export default {
  name: 'MixinsCourse',
  components: { LikeCard, ViewsCard },
  data() {
    return {
      demoA: { title: '文章 A', likes: 12, views: 345 },
      demoB: { title: '文章 B', likes: 1200, views: 15678 }
    }
  }
}
</script>

<template>
  <div class="mixins-page">
    <header class="header">
      <h1>混入 Mixins 学习</h1>
      <p>Mixins 是在多个组件之间复用可选项（data / methods / computed / watch / lifecycle）的传统方式。Vue3 仍支持 Options API 的 Mixins，适合迁移老项目或快速封装通用逻辑。</p>
    </header>

    <section class="demo">
      <h2>示例：复用统计逻辑</h2>
      <div class="demo-grid">
        <LikeCard :title="demoA.title" :initial-likes="demoA.likes" :initial-views="demoA.views" />
        <ViewsCard :title="demoB.title" :initial-likes="demoB.likes" :initial-views="demoB.views" />
      </div>
    </section>

    <section class="notes">
      <h2>关键知识点</h2>
      <ul>
        <li><strong>合并策略</strong>：data 合并；methods/computed 同名时，<em>组件优先</em>覆盖混入。</li>
        <li><strong>生命周期</strong>：混入与组件的钩子都会执行，<em>混入先执行</em>，便于统一初始化。</li>
        <li><strong>侦听器</strong>：混入与组件各自的 watch 都会生效，可分别监听不同字段。</li>
        <li><strong>与 Composition API</strong>：日常更推荐封装 composable（如 useXxx），但 Mixins 在旧代码迁移或快速横向复用时仍有用武之地。</li>
      </ul>
    </section>
  </div>
</template>

<style scoped>
.mixins-page {
  padding: 24px;
  background-color: #f4f5f5;
  min-height: 100vh;
}
.header h1 {
  margin: 0 0 8px;
  font-size: 24px;
  color: #1d2129;
}
.header p {
  color: #4e5969;
  margin: 0 0 16px;
}
.demo h2, .notes h2 {
  font-size: 18px;
  color: #1d2129;
  margin: 16px 0;
}
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.notes ul {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  list-style: none;
}
.notes li { margin: 8px 0; color: #4e5969; }
.notes strong { color: #1d2129; }
.notes em { color: #1e80ff; font-style: normal; }
</style>